import React, { Component } from 'react'
// 1.引入react-redux 核心api connect 高阶组件
import { connect } from 'react-redux' 
// 展示组件-UI组件
class List1 extends Component {
  render() {
    return (
      <div>
        list1
        <button onClick = { () => {
          this.props.changeList([4, 5, 6])
        }}>改变数据为 4，5，6</button>
        {
          this.props.list.map((item, index) => (
            <div key = { index }> { item } </div>
          ))
        }
      </div>
    )
  }
}
// 3.为UI组件提供状态
// state 表示的所有的状态
const mapStateToProps = (state) => {
  return { // key值自定义 - 一般就是状态管理的状态，value值为状态管理的数据
    list: state.list
  }
}
// 4.为UI组件提供业务逻辑
// dispatch 表示默认的参数，可以触发action，从而改变状态
const mapDispatchToProps = (dispatch) => { 
  return {
    changeList (payload) {
      dispatch({
        type: 'CHANGE_LIST',
        payload
      })
    }
  }
}
// 2.暴露时 使用connect 将UI组件转换为 容器组件
// 高阶组件的使用
// export default connect()(List1)
// mapStateToProps 容器组件给UI组件提供状态，UI组件通过props获取
// mapDispatchToProps 容器组件给UI组件提供业务逻辑，UI组件通过props执行
export default connect(mapStateToProps, mapDispatchToProps)(List1)

/**
 * // 函数柯里化
 * function fn (a) {
 *  return function (b) {
 *    return function (c) {
 *      return a + b + c
 *    }
 *  }
 * }
 * 
 * fn(1)(2)(3) // 6
 */

